<script>
export default {
  name: "IndexVue",
  data() {
    return {
      menuData: [],
      defaultOpeneds: []
    }
  },
  created() {
    this.findMenuByUserId();
  },
  methods: {

    // 跟据用户名查询用户所能操作的菜单
    findMenuByUserId() {
      this.$http.post("/index/findMenuById", {id: 1}).then(res => {
        console.log("用户所能操作的菜单")
        console.log(res)
        this.menuData = res.data;

        this.defaultOpeneds = this.menuData.map(menu => String(menu.id));

      })
    },

    // 退出登录
    logout() {
      //往后台发送请求 退出系统
      this.$http.get("/toLogout").then(res => {
        console.info("退出之后返回的数据", res);
        if (res.data.msg === 1) {
          //跳转到登录界面
          this.$router.push("/");
          this.$message({type: 'success', message: `退出成功`})

        } else {
          this.$message.error("退出失败")
        }
      });
      //跳组件

    }
  }
}
</script>

<template>
  <div style="width: 100vw;">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="23">
            <h2>uu后台管理系统</h2>
          </el-col>
          <el-col :span="1" style="height: 60px;">
            <el-button type="text" @click="logout()" style="margin-top: 17px;color: red">退出</el-button>
          </el-col>
        </el-row>
      </el-header>

      <el-container>
        <el-aside width="250px">

          <el-menu
              default-active="1"
              :default-openeds="defaultOpeneds"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff" router
              active-text-color="#ffd04b">

            <el-submenu :index="String(oneMenu.id)" v-for="oneMenu in menuData" :key="oneMenu.id">
              <template slot="title">
                <i class="el-icon-location"/>
                <span>{{ oneMenu.name }}</span>
              </template>

              <el-menu-item :index="'/index/'+twoMenu.path" v-for="twoMenu in oneMenu.subMenuList" :key="twoMenu.id">
                {{ twoMenu.name }}
              </el-menu-item>

            </el-submenu>

          </el-menu>

          <!--          <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"-->
          <!--                   active-text-color="#ffd04b" router>-->
          <!--            <el-menu-item v-for="oneMenu in menuData" :key="oneMenu.mid" :index="'/index/'+oneMenu.path">-->
          <!--              <span>{{ oneMenu.name }}</span>-->
          <!--            </el-menu-item>-->

          <!--          </el-menu>-->

        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  height: calc(100vh - 60px);
}

.el-main {
  padding: 0;
}

</style>